<template>
	<el-button primary @click="addInit" style="float: right;">+发起活动</el-button>
	<el-table
	  :data="tableData"
	  style="width: 100%"
	  stripe
	  ref="multipleTable"
	   @selection-change="handleSelectionChange"
	   :header-cell-style="{background:'#eef1f6',color:'#606266'}"
	>
		<el-table-column prop="id" label="编号" sortable  width="100" />
		<el-table-column prop="description" label="活动名称" sortable />
		<el-table-column prop="participantsNum" label="参与人数" sortable />
		<el-table-column prop="startTime" label="开始时间" sortable />
		<el-table-column prop="endTime" label="结束时间" sortable />
		<el-table-column prop="teacher.name" label="发起人"/>
		<el-table-column prop="leader.name" label="审批人"/>
		<el-table-column prop="state" label="活动状态" :formatter="formatProtocolType"/>
		<el-table-column prop="signedNum" label="签到人数"/>
	</el-table>    
	 <!-- 分页组件 -->
	<el-pagination
	  small
	  background
	  layout="prev, pager, next"
		:page-size="pageSize"
		:page-count="pageCount"
		:current-page="currentPage"
		@current-change="haddlePageChange"
	/>     
	<!-- 增加对话框 -->
	<el-dialog v-model="dialogVisible" title="增加" width="60%" draggable>
	<!-- <span>增加</span> -->
	  <el-form :model="form" label-width="80px" :rules="formRules"  class="demo-ruleForm">
	      <el-form-item label="编号" prop="id">
	        <el-input v-model="form.id" />
	      </el-form-item>
	      <el-form-item label="活动名称" prop="description">
	        <el-input v-model="form.description" />
	      </el-form-item>
		  <el-form-item label="参与人数" prop="participantsNum">
		    <el-input v-model="form.participantsNum" />
		  </el-form-item>
		  <el-form-item label="开始时间">
		        <el-col :span="11">
		          <el-date-picker
		            v-model="form.startTime"
		            type="date"
		            placeholder="Pick a date"
		            style="width: 100%"
		          />
		        </el-col>
			</el-form-item>
			<el-form-item label="结束时间">
		        <el-col :span="11">
		          <el-date-picker
		            v-model="form.endTime"
		            type="date"
		            placeholder="Pick a date"
		            style="width: 100%"
		          />
		        </el-col>
		      </el-form-item>		
		  <el-form-item label="发起人">
			  <el-input v-model="teacher" disabled />
			  </el-form-item>
			<el-form-item label="审批人">
				<el-select v-model="form.leader" value-key="name" placeholder="请选择" width="200px">
					<el-option v-for="item in leaderOption"
						:key="item.id"
						:label="item.name"
						:value="item">
					</el-option>
				</el-select>
			</el-form-item>
	      <el-form-item label="活动状态">
			<el-input v-model="state" disabled/>
	      </el-form-item> 
		  <el-form-item label="签到人数">
		    <el-input v-model="form.signedNum" />
		  </el-form-item> 
	   </el-form>
	  <template #footer>
	    <span class="dialog-footer">
	      <el-button @click="dialogVisible = false">取消</el-button>
	      <el-button type="primary" @click="addSubmit()">提交</el-button
	      >
	    </span>
	  </template>
	</el-dialog>  
	
</template>

<script setup>
	import {ref,toRefs,reactive,onMounted,getCurrentInstance} from 'vue'
	import{ useRouter } from 'vue-router'
	let { proxy } = getCurrentInstance();
	// import TEditor from '../components/TEditor.vue'
	var tableData=ref([]);
	var pageCount=ref(0)//总页数
	var pageSize=ref(4)
	var currentPage=ref(1)
	let teacher_id = ref(0);
	let pagination=ref({
		"pagination":{
			"pageNo":currentPage,
			"pageSize":pageSize,
		}
	})
	
	function getTableData(){
		teacher_id.value=parseInt(window.sessionStorage.getItem("userId"))
		console.log(teacher_id.value)
	    proxy.$http.get("/activityReadByTI?id="+teacher_id.value,
		{"headers":{"token":window.sessionStorage.getItem("token")}})
		.then(res => {
			tableData.value=res.data.data;//把获取的服务端数据数组传递给tableData
			//总页数
			pageCount.value=res.data.totalPages;
		})
		.catch(err => {
			console.log(err)
		});
	}
	
	let teacherOption=ref('');
	let leaderOption=ref([]);
	onMounted(()=>{
		getTableData();  //请求第一页的表格数据
	});
	
	function handleChange (item) {
		console.log('change', item)
	}

	let form=ref({});//修改或增加的一个对象
	let teacher=ref({});
	let state=ref({});
	//增加对话框显示与否
	const dialogVisible = ref(false)
	function addInit(){
		dialogVisible.value = true
		teacher.value=window.sessionStorage.getItem("loginUser")
		form.value.teacher={id:window.sessionStorage.getItem("userId")}
		state.value=0
		proxy.$http.get("/userFindById?id="+teacher_id.value,{"headers":{"token":window.sessionStorage.getItem("token")}})
		.then(res => {
			teacherOption.value=res.data.data.name;//获取学院下拉数据，仅仅id和名称
			console.log(teacherOption.value)
		})
		proxy.$http.get("/findAllLN",{"headers":{"token":window.sessionStorage.getItem("token")}})
		.then(res => {
			leaderOption.value=res.data.data;//获取学院下拉数据，仅仅id和名称
		})
	}
	//增加提交
	function addSubmit(){
		console.log(form.value)
		proxy.$http.post('/activityAddOrDel',form.value,{"headers":{"token":window.sessionStorage.getItem("token")}}) //按增加数据的接口组织url
		.then(res => {
			dialogVisible.value = false //关闭对话框		
			getTableData();  //更新表格数据
			form.value={}  //清空增加对象
			alert(res.data.message)
		})
	}
	//点击改变页码时，当前页改变，根据新的URL参数重新获取后台数据
	function haddlePageChange(currentpage){			
		currentPage.value=currentpage;
		getTableData();
		
	}
	function  formatProtocolType(row) {
	  　　let type = row.state;
	 　　switch (type) {
	  　　　　case 1:
	  　　　　　　type = "通过";
	  　　　　　　break;
	  　　　　case 0:
	  　　　　　　type = "待审核";
	 　　　　　　break;
	 　　　　 case 2:
	 　			 type = "未通过";
				break;
	}
	return type;
	}
	
	//文本框输入内容校验
	const isNum = (rule, value, callback) => {
		const id = /^[0-9]*$/
		if(value==''||value==null)  //补充了非空和长度校验
		    callback(new Error('活动编号不能为空!'))
		else if(value.length<1||value.length>4)
			callback(new Error('活动编号数字个数应为1至4!'))
		else if (!id.test(value)) {
			callback(new Error('请输入数字编号!'))
		} else {
			callback()
		}	  
	
	};
	const formRules = reactive({
		id: [
		  {validator: isNum, trigger: 'blur'}  // validator是指用isNum方法做校验，可全部都用方法校验
		],
		description: [
		  {required: true, message: '请输入活动名称', trigger: 'blur'},
		  {min: 4, max: 10, message: '长度在4 到 10 个字符', trigger: 'blur'}
		],		
	})
	

</script>